<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.home {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

.video-list {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;

  .search {
    position: absolute;
    right: .4rem;
    top: .3rem;
    z-index: 100090;
    i {
      font-size: .6rem;
      color: $color-white;
    }
  }
}
</style>
<template>
  <div class="home">
    <div class="video-list">

      <ShortVideoPlayer ref="shortVideoPlayerRef" :videoList="state.videoList" :showBackButton="false" />
      <!-- <ErrorComponent v-if="state.hasError" @retry="processVideoList" /> -->
      <div class="search">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, defineAsyncComponent } from 'vue';
import { getPlayVideo } from '../../api/home/Home';
import ShortVideoPlayer from '../../components/common/shortVideoPlayer.vue';

const state = reactive({
  videoList: [],
  hasError: false
});
const processVideoList = async () => {
  try {
    const res = await getPlayVideo();
    const { data } = res;
    console.log(res);

    const processedList = data.map((itemStr, index) => {
      let itemObj;
      try {
        itemObj = JSON.parse(itemStr);
      } catch (err) {
        console.error(`第 ${index + 1} 条视频数据解析失败`, err);
        return null;
      }

      const baseUrl = '';
      const videoInfo = itemObj.Video;
      videoInfo.isLiked = false;
      if (videoInfo.userAvatar?.startsWith('/')) {
        videoInfo.userAvatar = baseUrl + videoInfo.userAvatar;
      }

      const numInfo = itemObj.WSLCNum;
      return {
        video: { ...videoInfo },
        stats: {
          shareNum: Number(numInfo.shareNum) || 0,
          watchNum: Number(numInfo.watchNum) || 0,
          commentNum: Number(numInfo.commentNum) || 0,
          likeNum: Number(numInfo.likeNum) || 0
        },
        videoId: videoInfo.videoId
      };
    }).filter(Boolean);

    state.videoList = processedList;
    state.hasError = false;
    console.log('Home页面：视频列表加载完成', state.videoList);
  } catch (err) {
    console.error('Home页面：获取视频列表失败', err);
    state.videoList = [];
    state.hasError = true;
  }
};

onMounted(async () => {
  await processVideoList();
});
</script>
